<template>
  <div class="title">
    <div class="head"></div>
    <van-nav-bar
      :title="title"
      left-text
      right-text
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
</template>
<script>
export default {
  name: 'NavBar',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    onClickLeft() {
      //   Toast('返回')
      this.$emit('goBack')
    },
    onClickRight() {
      //   Toast('按钮')
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  .head{
      background-color: $main-color;
      height: $top;
  }
 
  .van-nav-bar {
    //  padding-top: $top;
    background-color: $main-color;
  }
  /deep/ .van-nav-bar__title {
    color: #ffffff;
  }

  /deep/ .van-icon-arrow-left::before {
    color: #ffffff;
    font-size: 18px;
  }
}
</style>